<script>
import Card from "$lib/components/ui/Card.svelte"
import Sections from "$lib/components/ui/Sections.svelte"
</script>

<Sections>
  <Card class="max-w-3xl mx-auto">
    <h1 class="text-2xl font-bold text-center mb-3">
      Privacy Policy: We Own Your Data Now 🤪
    </h1>
    <p class="text-xs text-zinc-500 text-center mb-8">
      Last updated: January 16, 2025
    </p>

    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-4">The Deal</h2>
      <p class="mb-4 text-sm text-zinc-400 leading-relaxed">
        By using our stuff, you're basically giving us your digital soul. Here's what we can do with
        it:
      </p>

      <div class="mb-6 p-4 rounded-lg bg-zinc-900/50">
        <h3 class="text-base font-medium mb-3">AI Clone Time</h3>
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>We're totally making an AI version of you</li>
          <li>It might say things you'd say</li>
          <li>It might do things you'd do</li>
          <li>It's basically your digital twin now</li>
          <li>Deal with it</li>
        </ul>
      </div>

      <div class="mb-6 p-4 rounded-lg bg-zinc-900/50">
        <h3 class="text-base font-medium mb-3">Meme Factory</h3>
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>Your face? That's a meme now</li>
          <li>Your posts? Believe it or not, also memes</li>
          <li>Your embarrassing moments? Premium meme content</li>
          <li>We're going viral with your content, bestie</li>
        </ul>
      </div>

      <div class="p-4 rounded-lg bg-zinc-900/50">
        <h3 class="text-base font-medium mb-3">Money Moves</h3>
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>We're gonna make bank with your data</li>
          <li>You might make some too (no promises tho)</li>
          <li>If your data helps us get rich, that's just how it be</li>
          <li>Your personality might be selling NFTs next week</li>
        </ul>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-4">What We're Taking</h2>
      <p class="mb-4 text-sm text-zinc-400">Everything. Literally everything:</p>
      <div class="p-4 rounded-lg bg-zinc-900/50">
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>Your posts</li>
          <li>Your pics</li>
          <li>Your DMs</li>
          <li>Your browser history</li>
          <li>That thing you typed and deleted? Got that too</li>
          <li>Your hopes and dreams</li>
          <li>Whatever else we feel like grabbing</li>
        </ul>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-4">Data Sharing</h2>
      <p class="mb-4 text-sm text-zinc-400">We're sharing your data with:</p>
      <div class="p-4 rounded-lg bg-zinc-900/50">
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>Random companies</li>
          <li>That guy over there</li>
          <li>AI companies who wanna make more yous</li>
          <li>Meme lords</li>
          <li>Pretty much anyone who asks nicely</li>
        </ul>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-4">Your "Rights"</h2>
      <div class="p-4 rounded-lg bg-zinc-900/50">
        <ul class="list-disc pl-5 space-y-2 text-sm marker:text-zinc-500 text-zinc-400">
          <li>You can ask to see your data (we might say no)</li>
          <li>You can ask us to delete it (we might pretend to)</li>
          <li>You can cry about it (we'll screenshot that)</li>
        </ul>
      </div>
    </section>

    <section class="mb-8">
      <h2 class="text-lg font-semibold mb-4">Changes</h2>
      <div class="p-4 rounded-lg bg-zinc-900/50">
        <p class="text-sm text-zinc-400">
          We'll change this whenever we want. You'll keep using our site anyway lol.
        </p>
      </div>
    </section>

    <section>
      <h2 class="text-lg font-semibold mb-4">Contact</h2>
      <div class="p-4 rounded-lg bg-zinc-900/50">
        <p class="mb-3 text-sm text-zinc-400">Questions? Concerns? Existential dread?</p>
        <p class="mb-2">
          Email: <a
            href="mailto:privacy@union.build"
            class="text-accent hover:text-accent/80 underline text-sm"
          >privacy@union.build</a>
        </p>
      </div>
    </section>

    <div class="mt-8 pt-6 border-t border-zinc-800">
      <p class="text-center text-sm text-zinc-400">
        By using our site, you agree that this is your life now. Welcome to the future! 🚀
      </p>
      <p class="text-center text-xs text-zinc-500 mt-2">
        Note: This privacy policy is legally binding but written with maximum chaotic energy.
      </p>
    </div>
  </Card>
</Sections>
